<template>
    <div>
        <el-row>
            <el-col :span="$store.getters.user.userRole=='超级管理员'?3:0">
               <treeComponent style="margin-top:-52px" @GetNodeValue="GetNodeValue"></treeComponent>
            </el-col>
            <el-col :span="$store.getters.user.userRole=='超级管理员'?20:23" style="margin-left:10px">
                <el-tabs type="border-card">
                    <el-tab-pane label="事件处理">
                        <el-row>
                            <el-col :span="24" style="margin-bottom:10px">
                                <el-button type="primary" @click="addNewEvent">新增事故</el-button>
                                <div style="display:inline-block;float:right">
                                    <el-input style="width:200px" v-model="filters.name" placeholder="事故名称"></el-input>
                                    <el-select style="width:200px" v-model="filters.type" placeholder="事故类型">
                                        <el-option  v-for="(n,i) of AccidentType" :value="n.trafficAccidentTypeValue" :label="n.trafficAccidentTypeName" :key="i"></el-option>
                                    </el-select>
                                    <el-button type="primary" icon="search" @click="getInfo">查询</el-button>
                                    <el-button type="primary" @click="flush"><i class="fa fa-refresh fa-spin"></i>刷新</el-button>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <el-table :data="needDealEvents" border >
                                    <el-table-column v-for="(v,k,i) in props" :key="v.id" :label="labels[i]" align="center">
                                        <template scope="scope">
                                            {{scope.row[k]}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="200" align="center">
                                        <template scope="scope">
                                            <el-button type="text" @click="checkEventDetail(scope.row.trafficAccidentID)">查看详情</el-button>
                                            <el-button type="text" @click="editTrafficEvent(scope.row.trafficAccidentID)">编辑</el-button>
                                            <el-button type="text" @click="deleteEvent(scope.row.trafficAccidentID)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                            <el-col :span="24" style="margin-top:10px">
                                    <el-pagination
                                    style="float:right"
                                    layout="prev, pager, next"
                                    :total="totalNeedDeal">
                                    </el-pagination>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="报表统计"></el-tab-pane>
                    <el-tab-pane label="事件处理流程"></el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import treeComponent from "../../components/common/treeComponent";
import * as api from "@/api/trafficManage";

export default {
  data() {
    return {
      filters: {
        name: "", // 事件名称
        type: "",
        netGridID: "", // 所属网格
        page: 1,
        pageSize: 10
      },
      defaultProps: {
        children: "children",
        label: "label"
      },
      needDealEvents: [
        {
          trafficAccidentID: "", //bigint not null auto_increment,
          trafficAccidentName: "", //事故名称
          trafficAccidentKind: "", //  int comment '交通事故性质，编码待定',
          trafficAccidentTypeValue: "", // char(2) comment '交通事故类型，待定',
          trafficAccidentContent: "", // varchar(1000) comment '交通事故内容描述',
          trafficAccidentStartDateTime: "", // datetime comment '交通事故开始时间',
          trafficAccidentEndDateTime: "", // datetime comment '交通事故结束时间',
          trafficAccidentHappenLongitude: "", // double(32,8) comment '交通事故发生地 地理经度信息',
          trafficAccidentHappenLatitude: "", // double(32,8) comment '交通事故发生地  地理纬度信息',
          trafficAccidentStatusTypeValue: "", // char(2) comment '当前交通事故处理的最新状态',
          currentRemarks: "", //       varchar(1000) comment '当前处理交通事故备注',
          currentResponsiblePersonCertID: "", // char(18) comment '当前经办人员身份证号',
          currentResponsiblePersonName: "", // varchar(50) comment '当前经办人员姓名',
          currentResponsiblePersonContact: "", // varchar(50) comment '经办人员联系方式',
          netGridID: "" //            bigint comment '事故发生地所属网格区域',
        }
      ],
      props: {
        trafficAccidentID: "", //bigint not null auto_increment,
        trafficAccidentName: "",
        trafficAccidentKindName: "", //  int comment '交通事故性质，编码待定',
        trafficAccidentTypeName: "", // char(2) comment '交通事故类型，待定',
        trafficAccidentStatusTypeName: "", // char(2) comment '当前交通事故处理的最新状态',
        currentResponsiblePersonName: "", // varchar(50) comment '当前经办人员姓名',
        currentResponsiblePersonContact: "", // varchar(50) comment '经办人员联系方式',
        netGridName: "" //            bigint comment '事故发生地所属网格区域',
      },
      labels: [
        "编号",
        "事故名称",
        "事故性质",
        "事故类型",
        "事故处理状态",
        "经办人姓名",
        "经办人联系方式",
        "事故发生网格"
      ],
      totalNeedDeal: 100,
      currentRow: null,
      AccidentType: []
    };
  },
  components: {
    treeComponent
  },
  methods: {
    flush(){
        this.filters.name = this.filters.type = null
        this.getInfo()
    },
    deleteEvent(id) {
      this.$confirm("是否删除此记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api.deleteTrafficAccident(id).then(res => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getInfo();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    GetNodeValue(val) {
      this.filters.netGridID = val;
      this.getInfo()
    },
    addNewEvent() {
      this.$router.push({ path: "addTrafficEvent" });
    },
    checkEventDetail(id) {
      this.$router.push({ path: "trafficEventInfo", query: { id: id } });
    },
    editTrafficEvent(id){
      this.$router.push({ path: "editTrafficEvent", query: { id: id } });
    },
    getInfo() {
      api.getTrafficAccidentQuery(this.filters).then(res => {
        this.needDealEvents = res.data.vos;
        this.totalNeedDeal = res.data.page.totalCount;
      });
    }
  },
  mounted() {
    if(this.$store.getters.user.userRole!='超级管理员')
      this.filters.netGridID = this.$store.getters.user.netGridID
    api.fetchTrafficCodes().then(res => {
      this.AccidentType = res.data.AccidentType;
    });
    this.getInfo();
  }
};
</script>

<style>
.is-current {
  /* background-color: #1D8CE0; */
  color: #1d8ce0;
  font-weight: 1200;
}

.el-table-row,
.current-row {
  background-color: #1d8ce0;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}

::-webkit-scrollbar {
  /* width: 10px; */
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, rgb(211, 211, 211)),
    color-stop(0.72, rgb(211, 211, 211)),
    color-stop(0.86, rgb(211, 211, 211))
  );
}
</style>
